<template>
  <a-row
    class="grid-demo"
    align="center"
    justify="center"
    style="margin-bottom: 16px"
  >
    <a-col :flex="2" />
    <a-col flex="auto">
      <a-card
        title="欢迎使用懒人笔记本"
        style="height: 80vh; text-align: center"
      >
        <a-steps changeable :current="current + 1" @change="setCurrent">
          <a-step description="没什么说的">
            选择目录啊哥
          </a-step>
          <a-step description="ok了啊">
            准备好了吗
          </a-step>
        </a-steps>
        <a-divider />
        <a-row justify="center" style="margin-bottom: 16px">
          <a-col :span="24">
            <div
              v-show="steps[current].content === 1"
              :style="{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
              }"
              class="steps-content"
              style="height: 30vh"
            >
              <a-input
                id="file_path"
                :model-value="filePath"
                readonly
                placeholder="请选择目录"
                allow-clear
                @click="dialogOpen"
              >
                <template #prepend>
                  <icon-folder />
                </template>
              </a-input>
            </div>
            <div
              v-show="steps[current].content === 2"
              class="steps-content"
              style="height: 30vh"
            >
              <a-result :title="filePath" subtitle="确认目录后启动软件">
                <template #extra>
                  <a-space />
                </template>
              </a-result>
            </div>
          </a-col>
        </a-row>
        <a-row justify="center" style="margin-bottom: 16px">
          <a-col :span="12">
            <a-space size="large">
              <a-button
                type="secondary"
                :disabled="current == 0"
                @click="onPrev"
              >
                <IconLeft />
                撤回
              </a-button>
              <a-button
                v-if="current === steps.length - 1"
                type="primary"
                @click="savePath"
              >
                原神，启动！
              </a-button>
              <a-button
                v-if="current < steps.length - 1"
                type="primary"
                :disabled="current >= 2"
                @click="onNext"
              >
                下一步
                <IconRight />
              </a-button>
            </a-space>
          </a-col>
        </a-row>
      </a-card>
    </a-col>
    <a-col :flex="2" />
  </a-row>
</template>

<script setup lang="ts">
import commonApi from '@/api/commonApi.js'
import { AppSetting } from '@@/entity/appSetting.js'

import { Message } from '@arco-design/web-vue'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'

async function dialogOpen() {
  const result = await commonApi.showOpenDialog()
  filePath.value = result
  console.log('result  ', result, filePath)
}

const router = useRouter()

function savePath() {
  const appSetting = new AppSetting()
  appSetting.id = 1
  appSetting.nikeName = '程序员'
  appSetting.first = false
  appSetting.path = filePath.value
  commonApi.saveAppSetting(appSetting).then((result) => {
    console.log(result)
    if (result) {
      Message.info('保存成功！')
      localStorage.setItem('app', appSetting.path)
      router.push({ path: '/' })
    }
  })
}

const filePath = ref('')

const current = ref(0)

function onNext() {
  if (!filePath.value) {
    Message.warning('请先选择目录后操作！')
    return
  }
  current.value++
}

function onPrev() {
  current.value--
}

const setCurrent = function (current: any) {
  current.value = current
}
const steps = [
  {
    title: '设置目录',
    content: 1,
  },
  {
    title: '确认目录',
    content: 2,
  },
]

onMounted(() => {
  commonApi.getAppSetting().then((result) => {
    if (result && result.id) {
      filePath.value = result.path
      console.log('welcome', filePath.value)
    }
  })
})
</script>

<style lang="less" scoped></style>
